
<include file="mobile/Public/header" />

<style>
    body{background: white}
    .commentlist-section{border-bottom: thin solid #dadada;padding-bottom: 1rem}
    .commentlist-section.left-right-section .right-section{padding-left: 5rem;padding-right: 0.834rem}
    .avatar-img{width: 5rem;height: 5rem;border-radius: 50%;padding: 1rem}
    .commentlist-title{padding-top: 1rem;height: 3rem;line-height: 3rem;}
    .commentlist-star-group{float: right;vertical-align: middle}
    .commentlist-star-group>img{width: 1.5rem;}
    /**/
    .commentlist-pic-article section{ height: 0;width: 22%;position: relative;padding:0 0 22%;float: left;margin-right: 4%;margin-bottom: 1rem;background: white}
    .commentlist-pic-article section:nth-child(4n){margin-right: 0}
    .commentlist-pic-article section>.square-div{ position: absolute;height: 100%;width: 100%;border: thin solid #dadada;text-align: center}
    .square-div>img{width: 100%;height: 100%;}
    .square-div.text-square span{vertical-align: middle;}
    .commentlist-pic-article{margin-top: 0.5rem}
</style>
<script src="__JS__/template.js"></script>
<header class="color-main vertical-box">
    <span class="header-title">评价</span>
    <div class="header-left vertical-box">
        <img class="img-btn" src="__IMG__/back.png" onclick="history.back()">
    </div>
    <div class="header-right vertical-box">
        <img class="img-btn" src="__IMG__/home.png" onclick="window.location.href='{:U('shop/index/index')}'">
    </div>
</header>
<article id="content" class="margin-top margin-bottom">
    <script id="comment-tpl" type="text/html">
        {{each list as value i}}
        <section class="commentlist-section left-right-section">
            <div class="left-section">
                {{if value.user.avatar32!=undefined}}
                <img class="avatar-img border-box" src="{{value.user.avatar32}}">
                {{else}}
                <img class="avatar-img border-box" src="__IMG__/avatar.png">
                {{/if}}
            </div>
            <div class="right-section border-box">
                <div class="commentlist-title vertical-box">
                    <span class="tips-font">{{value.user.nickname}}</span>
                    <div class="commentlist-star-group">
                        {{if value.score>0}}
                            <img src="__IMG__/star1.png">
                        {{else}}
                            <img src="__IMG__/star1_.png">
                        {{/if}}
                        {{if value.score>1}}
                            <img src="__IMG__/star1.png">
                        {{else}}
                            <img src="__IMG__/star1_.png">
                        {{/if}}
                        {{if value.score>2}}
                            <img src="__IMG__/star1.png">
                        {{else}}
                            <img src="__IMG__/star1_.png">
                        {{/if}}
                        {{if value.score>3}}
                            <img src="__IMG__/star1.png">
                        {{else}}
                            <img src="__IMG__/star1_.png">
                        {{/if}}
                        {{if value.score>4}}
                            <img src="__IMG__/star1.png">
                        {{else}}
                            <img src="__IMG__/star1_.png">
                        {{/if}}
                    </div>
                </div>
                <p class="comment-content tips-font">{{value.brief}}</p>
                <article class="commentlist-pic-article clearfix">
                    {{each value.images as value i}}
                    <section>
                        <div class="square-div"><img src="{{value}}">
                        </div>
                    </section>

                    {{/each}}

                </article>
                <p class="white-tips-font small-text">{{value.create_time*1000 | dateFormat:'yyyy-MM-dd hh:mm:ss'}}</p>
            </div>
        </section>

        {{/each}}

    </script>

    <p class="load-more"><!--加载中...--></p>
</article>

<include file="mobile/Public/footer" />


<script>
    var commentlist = {$commentlist|json_encode};
    console.log(commentlist);
    var product_id = <php> echo (!empty($product_id))? $product_id:'null' </php>;
    console.log(product_id);
    //'jquery' or 'zepto' 脚本入口,按情况选择加载
    seajs.use(['jquery'], function () {
        $(document).ready(function () {
                if(!product_id) history.back();
                var page = 0;
                getComment();
                function getComment(page){
                    var data = {
                        product_id:product_id,
                        page:page
                    };
                    $.post('{:U('shop/index/commentlist')}',data,function (ret) {
                        console.log(ret);

                        var data = {
                            list: ret.info.list
                        };
                        var html = template('comment-tpl', data); //实例化
                        document.getElementById('content').innerHTML = html;

                    })
                }

          })


        /**
         * 对日期进行格式化，
         * @param date 要格式化的日期
         * @param format 进行格式化的模式字符串
         *     支持的模式字母有：
         *     y:年,
         *     M:年中的月份(1-12),
         *     d:月份中的天(1-31),
         *     h:小时(0-23),
         *     m:分(0-59),
         *     s:秒(0-59),
         *     S:毫秒(0-999),
         *     q:季度(1-4)
         * @return String
         * @author yanis.wang
         * @see	http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
         */
        template.helper('dateFormat', function (date, format) {
            if (typeof date === "string") {
                var mts = date.match(/(\/Date\((\d+)\)\/)/);
                if (mts && mts.length >= 3) {
                    date = parseInt(mts[2]);
                }
            }
            date = new Date(date);
            if (!date || date.toUTCString() == "Invalid Date") {
                return "";
            }
            var map = {
                "M": date.getMonth() + 1, //月份
                "d": date.getDate(), //日
                "h": date.getHours(), //小时
                "m": date.getMinutes(), //分
                "s": date.getSeconds(), //秒
                "q": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds() //毫秒
            };

            format = format.replace(/([yMdhmsqS])+/g, function(all, t){
                var v = map[t];
                if(v !== undefined){
                    if(all.length > 1){
                        v = '0' + v;
                        v = v.substr(v.length-2);
                    }
                    return v;
                }
                else if(t === 'y'){
                    return (date.getFullYear() + '').substr(4 - all.length);
                }
                return all;
            });
            return format;
        });
    });



</script>
</body>
</html>